<template>
  <div class="dashboard">
    <!-- 欢迎信息 -->
    <div class="welcome">
      <div class="line"></div>
      <div class="welcome-text">欢迎使用小区物业管理系统！v1.0</div>
    </div>

    <!-- 统计信息 -->
    <div class="stats">
      <el-row gutter="20">
        <el-col :span="6" class="top-info" v-for="(stat, index) in stats" :key="index">
          <el-card shadow="never" class="stat-card detail">
            <div class="stat-card-content">
              <div class="left-icon" :class="stat.color">
                <i :class="stat.icon" style="font-size: 42px;"></i>
              </div>
              <div class="right-info">
                <div class="number">{{ stat.value }}</div>
                <div class="title">{{ stat.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="info-wrap">
      <div class="text-line"></div>
      <div class="text">信息统计</div>
    </div>

    <!-- 图表部分 -->
    <div class="charts">
      <el-row gutter="20">
        <el-col :span="8">
          <div class="chart-title">
            <div class="line"></div>
            <div class="title-info">小区人数</div>
          </div>
          <div ref="pieChart" class="chart-container"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart-title">
            <div class="line"></div>
            <div class="title-info">小区宠物数</div>
          </div>
          <div ref="lineChart" class="chart-container"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart-title">
            <div class="line"></div>
            <div class="title-info">小区人口年龄段</div>
          </div>
          <div ref="barChart" class="chart-container"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts';

export default {
  name: 'ControlPanel',
  data() {
    return {
      stats: [
        { title: '总栋数', value: 45, icon: 'el-icon-office-building', color: 'green' },
        { title: '总户数', value: 600, icon: 'el-icon-office-building', color: 'red' },
        { title: '总人数', value: 8310, icon: 'el-icon-user', color: 'blue' },
      ],
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 饼图
      const pieChart = echarts.init(this.$refs.pieChart);
      pieChart.setOption({
        // title: { text: '小区人数统计' },
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 335, name: 'A区' },
              { value: 310, name: 'B区' },
              { value: 234, name: 'C区' },
              { value: 135, name: 'D区' },
              { value: 154, name: 'E区' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });

      // 折线图
      const lineChart = echarts.init(this.$refs.lineChart);
      lineChart.setOption({
        // title: { text: '小区宠物数' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['1月', '3月', '5月', '7月', '9月', '11月'],
        },
        yAxis: { type: 'value' },
        series: [
          {
            data: [10, 20, 30, 40, 50, 60],
            type: 'line',
            smooth: true,
            name: '小区1',
            color: '#f44336',
          },
          {
            data: [20, 30, 40, 50, 60, 70],
            type: 'line',
            smooth: true,
            name: '小区2',
            color: '#2196f3',
          },
          {
            data: [15, 25, 35, 45, 55, 65],
            type: 'line',
            smooth: true,
            name: '小区3',
            color: '#4caf50',
          },
        ],
      });

      // 柱状图
      const barChart = echarts.init(this.$refs.barChart);
      barChart.setOption({
        // title: { text: '小区人口年龄段' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['老人', '成年人', '儿童'] },
        xAxis: {
          type: 'category',
          data: ['小区1', '小区2', '小区3'],
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: '老人',
            type: 'bar',
            data: [120, 150, 180],
            color: '#f44336',
          },
          {
            name: '成年人',
            type: 'bar',
            data: [200, 250, 300],
            color: '#2196f3',
          },
          {
            name: '儿童',
            type: 'bar',
            data: [100, 120, 150],
            color: '#4caf50',
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 清空el-card的默认样式 */
.el-card {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* 清空el-card__body的默认样式 */
.el-card__body {
  padding: 0 !important;
}

/* 清空el-card__header的默认样式 */
.el-card__header {
  padding: 0 !important;
  border: none !important;
}

/* 清空el-card__footer的默认样式 */
.el-card__footer {
  padding: 0 !important;
  border: none !important;
}
.dashboard{
  .welcome{
    background-color: #F2F2F2;
    display: flex;
    .line{
      width:6px;
      height: 48px;
      background-color: #2FB9D4;
    }
    .welcome-text{
      line-height: 48px;
      font-size: 18px;
      padding-left: 12px;
    }
  }
  .stats {
  margin-bottom: 20px;
  .top-info {
    margin: 10px 0;
    .detail {
      .stat-card-content {
        display: flex;
        border: none;
        flex-direction: row;
        .el-card__body{
           padding: 0px !important; /* Remove default padding */
        }
        height: 120px; /* Set a fixed height for the card */
      }

      .left-icon {
        width: 50%; /* Left section takes 50% of the width */
        height: 100%; /* Full height */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
      }
      .right-info {
        width: 50%; /* Right section takes 50% of the width */
        display: flex;
        flex-direction: column;
        align-items: center; /* Center text horizontally */
        justify-content: center; /* Center text vertically */
        text-align: center;
        border-bottom: rgba(218, 217, 217, 0.959) solid 1px;
        .title {
          font-size: 14px;
          color: #606266;
        }

        .number {
          font-size: 26px;
          color: #303133;
        }
        .title:hover{
          color:#2A6496;
          cursor: pointer;
        }
        .number:hover{
          color:#2A6496;
          cursor: pointer;
        }
      }
    }
  }
}
  .info-wrap{
    height: 80px;
    position: relative;
    .text-line{
      width:100%;
      height:1px;
      background-color: #F2F2F2;
      position: absolute;
      top: 50%; /* 将线条垂直居中 */
      transform: translateY(-50%);
    }
    .text{
      position: absolute;
      margin-left: 40px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
      color: #606266;
    }
    .text:hover{
      color:#2A6496;
    }
  }
}
.chart-title{
  display: flex;
  margin-bottom: 20px;
  .line{
    width:6px;
    height: 48px;
    background-color: #2FB9D4;
  }
  .title-info{
    font-size: 16px;
    color: #333333;
    line-height: 48px;
    margin-left: 14px;
  }
}
.left-icon.green {
  background-color: #4caf50;
  color: #fff;
}

.left-icon.red {
  background-color: #f44336;
  color: #fff;
}

.left-icon.blue {
  background-color: #2196f3;
  color: #fff;
}

.chart-container {
    height: 400px;
    border-bottom: 1px solid #e0e0e0;
  }
</style>
